<template>
  <a-modal
    :width="1100"
    :visible="visible"
    title="免租期摊销自定义"
    @cancel="onClose"
    ok-text="确定"
    :destroyOnClose="true"
    :confirmLoading="submitLoading"
    @ok="onSubmit"
  >
    <a-card title="租赁条款" size="small" :bodyStyle="{padding: 0}">
      <section class="statistics">
        <a-row class="quantity" type="flex">
          <a-col class="text-center">
            <div class="text">房源信息</div>
            <div class="number-width">
              1#1007
            </div>
          </a-col>
          <a-col class="text-center">
            <div class="text">优惠类型</div>
            <div class="number-width">
              免租期
            </div>
          </a-col>
          <a-col class="text-center">
            <div class="text">开始时间</div>
            <div class="number-width">
              2027-06-26
            </div>
          </a-col>
          <a-col class="text-center">
            <div class="text">结束时间</div>
            <div class="number-width">
              2027-07-27
            </div>
          </a-col>
          <a-col class="text-center">
            <div class="text">备注</div>
            <div class="number-width">
              --
            </div>
          </a-col>
        </a-row>
      </section>
      <a-form layout="vertical" style="padding: 10px 12px">
        <a-row :wrap="true" :gutter="12">
          <a-col :span="6">
            <a-form-item label="分摊开始日期" v-bind="validateInfos.start">
              <a-date-picker
                class="w-100p"
                v-model:value="formData.start"
                :format="dateFormatStr"
                :valueFormat="dateFormatStr"
                :allowClear="false"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="分摊结束日期" v-bind="validateInfos.end">
              <a-date-picker
                class="w-100p"
                v-model:value="formData.end"
                :format="dateFormatStr"
                :valueFormat="dateFormatStr"
                :allowClear="false"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="备注" v-bind="validateInfos.remark">
              <a-textarea
                v-model:value="formData.remark"
                placeholder="请输入备注"
                :auto-size="{ minRows: 1, maxRows: 3 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "@/common/utils/request";
const useForm = Form.useForm;
import moment from "moment";
const dateFormatStr = "YYYY-MM-DD";
export default defineComponent({
  name: "AmortizeCustomModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({
      submitLoading: false,
    });

    const formData = reactive({
      start: undefined,
      end: undefined,
      remark: '',
    });

    const ruleRef = reactive({
      start: [{ required: true, message: "必选" }],
      end: [{ required: true, message: "必选" }],
    });

    const { resetFields, validate, validateInfos} = useForm(formData, ruleRef);
    const onSubmit = () => {
      validate().then(() => {
        let params = {

        };
        state.submitLoading = true;
        request.put("/org", "/business/customerTeam/updateUserTeam", params).then((res) => {
          message.success(res.msg || "设置成功!");
          emit("handleSuccess");
        }).finally(() => {
          state.submitLoading = false;
        });
      });
    };




    const onClose = () => {
      emit("handleCancel");
    };


    const init = () => {

    };

    const reset = () => {
      state.submitLoading = false;
      resetFields();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      validateInfos,
      formData,
      dateFormatStr,
      onClose,
      onSubmit,
    };
  },
});

</script>

<style lang="less" scoped>
:deep(.ant-alert-description) {
  font-size: 12px;
  p {
    margin-bottom: 6px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
.statistics {
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
  .quantity {
    width: 100%;
    background-color: #fff;
    height: 100px;
    align-items: center;
    padding: 10px;
    .text-center {
      text-align: center;
      position: relative;
      flex: 1;
      width: 0;
      .text {
        color: #8d8d8d;
        padding-bottom: 4px;
        font-size: 12px;
      }
      .number-width {
        color:#000;
        font-weight: 600;
        font-size: 18px;
        width: 100%;
        // 文字不折行
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .text-center:not(:last-child):after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    border-left: 1px solid #e6e5e5;
  }
}
</style>
